<template>
  <div id="app">
    <h2 id="h2">基本使用</h2>
    <button id="btn1" @click="axiosGet">发送GET请求</button>
    <button id="btn2" @click="axiosPost">发送POST请求</button>
  </div>
</template>

<script>
import axios from "axios";

//设置请求拦截器 config配置对象
axios.interceptors.request.use(
  function(config){
    console.log("请求拦截器成功-1",config);
    //修改config中的参数
    //比如增加一个参数
    config.params={a:100};
    return config;
    //throw "参数出了问题";
    //如果这次对return进行修改，则会触发响应失败拦截器，然后就会触发失败回调（也就是catch）
  },
  function(error){
    console.log("请求拦截器失败-1");
    return Promise.reject(error);
  }
);

axios.interceptors.request.use(
  function(config){
    console.log("请求拦截器成功-2",config);
    //修改config
    config.timeout=2000;
    return config;
    //throw "参数出了问题";
    //如果这次对return进行修改，则会触发响应失败拦截器，然后就会触发失败回调（也就是catch）
  },
  function(error){
    console.log("请求拦截器失败-2");
    return Promise.reject(error);
  }
);

//设置响应拦截器
axios.interceptors.response.use(
  function(response){
    console.log("响应拦截器成功-1");
    return response;
  },
  function(error){
    console.log("响应拦截器失败-1");
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  function(response){
    console.log("响应拦截器成功-2");
    return response;
  },
  function(error){
    console.log("响应拦截器失败-2");
    return Promise.reject(error);
  }
);
//情况一：拦截器return正常，拦截器请求成功以及响应成功，并且触发成功回调
//情况二：请求拦截器throw，拦截器请求失败并且响应失败，触发失败回调函数，reason内容为throw内容

export default {
  name: 'App',
  methods:{
    axiosGet:function(){
      axios({
        method:"GET",
        url:"http://localhost:3000/posts"
      }).then(
        response=>{
          console.log("自定义回调处理成功",response.data);
        }
      ).catch(
          reason=>{
            console.log("自定义回调处理失败",reason);
            //此时reason内容就是前面拦截器throw出来的内容够
          }
        );
    },
  }  
}
</script>

<style>
  button{
    margin-left: 5px;
  }
  #btn1{
    background-color: skyblue;
  }
  #btn2{
    background-color: orange;
  }
</style>
